import { Avatar, Button, Dropdown, Tooltip } from "antd";

import { PutIndexedDB } from '../../Utils/IndexedDB'
import { themeStore, pageStore } from '../../Config/zustand'

import { UserAvatar, OptionsNavMapping, UserDropdownNavMapping } from '../../Config/theme'

import { LogoutOutlined } from '@ant-design/icons'

import { objectArrHas } from '../../Utils'


const testUserInof = {
    roleName: '超级管理员',
    userName: 'tonzoc'
}


const optionsMapping = {
    SetSystem: '系统设置',
    SetUserInfo: '用户设置'
}

const HeadA01 = () => {
    const { head } = themeStore()
    const { pageList, updateActive, updateList } = pageStore()

    const { optionsList } = head
    const { title, fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = head
    const { backSize, backColor, backRadio, backIndex, backShadowX, backShadowY, backShadowS, backShadowB } = head
    const { iconSize, iconColor, iconShadowX, iconShadowY, iconShadowS, iconShadowB } = head
    const { toolBack, toolColor, toolFamily, toolWeight, toolStyle, toolSize, toolShadowX, toolShadowY, toolShadowS, toolShadowB } = head

    const { userList, userIsSignOut } = head
    const { trigger, userRoleIsOut, userNameIsOut, userAvatarIsIn, shape } = head
    const { roleColor, roleFamily, roleWeight, roleStyle, roleSize, roleShadowX, roleShadowY, roleShadowS, roleShadowB } = head
    const { nameColor, nameFamily, nameWeight, nameStyle, nameSize, nameShadowX, nameShadowY, nameShadowS, nameShadowB } = head

    const titleStyle = {
        color: fontColor,
        fontFamily: fontFamily,
        fontWeight: fontWeight,
        fontStyle: fontStyle,
        fontSize: fontSize,
        filter: `drop-shadow(${fontShadowX}px ${fontShadowY}px ${fontShadowS}px ${fontShadowB})`
    }

    const optionsBack = {
        background: backColor,
        width: backSize,
        height: backSize,
        borderRadius: backRadio,
        marginLeft: backIndex,
        boxShadow: `${backShadowX}px ${backShadowY}px ${backShadowS}px ${backShadowB}`,
        '--iconSize': iconSize + 'px',
        '--iconColor': iconColor,
        '--iconShadowX': iconShadowX + 'px',
        '--iconShadowY': iconShadowY + 'px',
        '--iconShadowS': iconShadowS + 'px',
        '--iconShadowB': iconShadowB,
    }

    const OptionsToolStyle = {
        '--toolColor': toolColor,
        '--toolFamily': toolFamily,
        '--toolWeight': toolWeight,
        '--toolStyle': toolStyle,
        '--toolSize': toolSize + 'px',
        '--toolShadowX': toolShadowX + 'px',
        '--toolShadowY': toolShadowY + 'px',
        '--toolShadowS': toolShadowS + 'px',
        '--toolShadowB': toolShadowB
    }

    const RoleNameStyle = {
        color: roleColor,
        fontFamily: roleFamily,
        fontWeight: roleWeight,
        fontStyle: roleStyle,
        fontSize: roleSize,
        filter: `drop-shadow(${roleShadowX}px ${roleShadowY}px ${roleShadowS}px ${roleShadowB})`,
        height: roleSize,
        lineHeight: roleSize + 'px'
    }

    const UserNameStyle = {
        color: nameColor,
        fontFamily: nameFamily,
        fontWeight: nameWeight,
        fontStyle: nameStyle,
        fontSize: nameSize,
        filter: `drop-shadow(${nameShadowX}px ${nameShadowY}px ${nameShadowS}px ${nameShadowB})`,
        height: nameSize,
        lineHeight: nameSize + 'px'
    }

    const onOptionsFunc = (key) => {
        console.log('options操作', key)
        // 不同的key执行不同的条件数据
    }

    const onAvatarFunc = async (key) => {
        if (!objectArrHas(pageList, key, 'key')) {
            const obj = [...pageList, { key: key, label: optionsMapping[key], url: key, icon: 'shou' }]
            updateList(obj)
        }
        await PutIndexedDB('openKey', key)
        updateActive(key)
    }


    return (
        <div className='HeadA01'>
            <div style={titleStyle}>{title}</div>
            <div className='userBox'>
                <div className='options'>
                    {optionsList?.map(key => {
                        const item = OptionsNavMapping.find(v => v.value === key)
                        return (
                            <Tooltip key={key} overlayClassName='Admin__Head__Options' overlayStyle={OptionsToolStyle} title={item.label} placement="bottom" color={toolBack}>
                                <div className='icon' style={optionsBack} onClick={() => onOptionsFunc(key)}>{item.icon}</div>
                            </Tooltip>
                        )
                    })}
                </div>
                <Dropdown
                    trigger={[trigger]}
                    dropdownRender={() => {
                        return (
                            <div className='HeadA01__UserInfo'>
                                <div className='UserInfo'>
                                    {userAvatarIsIn && <Avatar shape={shape} size={48} src={UserAvatar['AvatarA17']} />}
                                    <div>
                                        <div style={RoleNameStyle}>{testUserInof.roleName}</div>
                                        <div style={UserNameStyle}>{testUserInof.userName}</div>
                                    </div>
                                </div>
                                {userList.length !== 0 &&
                                    <div className='Options'>
                                        {userList.map(key => {
                                            const item = UserDropdownNavMapping.find(v => v.value === key)
                                            return <div className='Downnav' key={key} onClick={() => onAvatarFunc(key)}>{item.label}</div>
                                        })}
                                    </div>
                                }
                                {userIsSignOut &&
                                    <div className='SignOut'>
                                        <Button type='primary' danger onClick={() => onSwitchPage('/')}>退出登录 <LogoutOutlined /></Button>
                                    </div>
                                }
                            </div>
                        )
                    }}
                >
                    <div className='userInfo'>
                        <Avatar shape={shape} size={48} src={UserAvatar['AvatarA17']} />
                        <div>
                            {userRoleIsOut && <div className='NameBox' style={RoleNameStyle}>{testUserInof.roleName}</div>}
                            {userNameIsOut && <div className='NameBox' style={UserNameStyle}>{testUserInof.userName}</div>}
                        </div>
                    </div>
                </Dropdown>
            </div>
        </div>
    )

};

export default HeadA01;